<template>
  <el-container style="height: 100vh;overflow: hidden">
    <el-header class="custom-header">
      <span style="color: rgb(245, 245, 245)">人机增强多智能体量化评估与演化</span>
      <div class="nav-tab">
        <el-tabs style="color: rgb(245, 245, 245)" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="模型" name="first"></el-tab-pane>
          <el-tab-pane label="性能" name="second"></el-tab-pane>
          <el-tab-pane label="效果" name="third"></el-tab-pane>
        </el-tabs>
      </div>
    </el-header>
    <el-main style="background-color: rgb(33, 108, 157);">
      <el-row>
        <el-col :span="24">
          <!-- 模型、性能、效果部分 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-button type="primary" @click="handleCalculate">算例 </el-button>
              <el-button type="primary" style="margin-left:30px;" @click="handleAgent">智能体 </el-button>
            </div>
          </el-card>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="6">
          <!-- 功能模块选择 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>功能模块选择</span>
            </div>
            <el-select v-model="functionalModule" placeholder="请选择">
              <el-option v-for="item in functionalModules" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>数据分析</span>
            </div>
            <el-select v-model="analysisArea">
              <el-option v-for="item in analysisAreas" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-card>
        </el-col>
        <el-col :span="3">
          <div style="display: inline-block; float: right;">
            <el-button type="primary" @click="dataSubmit">数据提交</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="display: inline-block; float: right;">
            <el-button type="primary">算例导入</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="display: inline-block; float: right;">
            <el-button type="primary"> 算例导出</el-button>
          </div>
        </el-col>
        <el-col :span="3" style="::v-deep background-color:rgb(33,108,157)">
          <div class="analysis-button">
            <div slot="header" class="clearfix">
              <span> </span>
            </div>
            <el-button type="primary" @click="simulateAndVerify" style="float: right">算例仿真校验</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- 图片展示区域 -->
          <el-card class="box-card">
            <!-- <div slot="header" class="clearfix">
              <span>图片展示区域</span>
            </div> -->
            <!-- 这里可以添加图表组件 -->
            <div class="demo-image">
              <div v-for="fit in fits" :key="fit" class="block">
                <!-- <span class="demonstration">{{ fit }}</span> -->
                <el-image style="width: 500px; height: 285px" :src="url" :fit="fit" />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <!-- table展示区域 -->
          <el-card class="box-card">
            <!-- <div slot="header" class="clearfix">
              <span>数据表格展示区</span>
            </div> -->
            <!-- 这里可以添加表格组件 -->
            <div>
              <el-table :data="tableData" stripe style="width: 100%;height: 100%" height="348">
                <el-table-column prop="name" label="名称" width="180" />
                <el-table-column prop="from_junction" label="连接点" width="180" />

                <el-table-column prop="basic_param" label="基础参数" />
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { computed, defineComponent, ref, watch } from "vue";
import type { ImageProps } from 'element-plus'
import axios from "axios";
import { useRouter } from 'vue-router'
import { BASE_URL } from '@/utils/common.js'

const router = useRouter();

function handleCalculate() {
  // console.log("handleCalculate");
  router.push("/tj-model")
}

function handleAgent() {
  router.push("/agent")
}

const functionalModule = ref("");
const performanceIndicator = ref("");
const analysisArea = ref("");
// 下拉框初始化完毕
// 下拉框赋值
const functionalModules = ref([
  { value: "", label: "请选择" },
  { value: "microgrid", label: "微网群" },
  { value: "integrated_energy", label: "综合能源" },
  { value: "distributed_grid", label: "分布式协同电网" },
  // ... 其他功能模块
]);

const performanceIndicators = ref([
  { value: "import", label: "导入" },
  { value: "export", label: "导出" },
  { value: "modify", label: "修改" },
  // ... 其他性能指标
]);

const analysisAreas = ref([
  // { value: "partition", label: "分区" },
  // { value: "analysis", label: "源荷特征挖掘" },
]);

const selectedFunctionalModule = computed(() => {
  return functionalModules.value.find(item => item.value === functionalModule.value);
});

const selectedAnalysisArea = computed(() => {
  var selectedItem = analysisAreas.value.find(item => item.value === analysisArea.value)
  //console.log("第二个选择框当前的值是::"+selectedItem);
  return selectedItem
})

watch(functionalModule, (newVal, oldVal) => {
  console.log("param1是::" + newVal);
  if (newVal === "distributed_grid") {
    analysisAreas.value = [
      { value: "", label: "请选择" },
      { value: "partition", label: "分区" },
      { value: "analysis", label: "源荷特性分析" },
    ]
  } else {
    analysisAreas.value = []
    analysisArea.value = ''
  }
})

watch(analysisArea, (newVal, oldVal) => {
  console.log("第二个选择框当前的值是::" + newVal);
})

const dataSubmit = async () => {
  const formData = new FormData();
  formData.append('functionModule', selectedFunctionalModule.value.label);

  if (selectedAnalysisArea.value) {
    console.log("点提交时，选择框二的值是：：" + selectedAnalysisArea.value.label)
    formData.append('analysis', selectedAnalysisArea.value.label);
  }
  //console.log("选择的值是::"+selectedFunctionalModule.value.label);
  try {
    const response = await axios.post(BASE_URL + '/getWeiwangqun', formData, {
      headers: {
        'Content-Type': 'application/json',
      },
    });
    console.log(response.data);
    tableData.value = response.data;
    if (selectedFunctionalModule.value.label == "微网群") {
      url.value = BASE_URL + "/getWeiwangImg";

    } else if (selectedFunctionalModule.value.label == "综合能源") {
      url.value = BASE_URL + "/getEnergyImg";
    } else if (selectedFunctionalModule.value.label == "分布式协同电网") {
      if (selectedAnalysisArea.value) {
        console.log("分网出错::" + selectedAnalysisArea.value.label);
        if (selectedAnalysisArea.value.label === "分区") {
          url.value = BASE_URL + "/getCollaborateArea";
        }
        if (selectedAnalysisArea.value.label === "源荷特性分析") {
          url.value = BASE_URL + "/getCollaborateLoad"
        }
      } else {
        url.value = BASE_URL + "/getCollaborateImg";
      }
    }


  } catch (error) {
    console.error(error);
  }

}

function simulateAndVerify() { }

//图片js
const fits = [
  'fill'

] as ImageProps['fit'][]
const url = ref(BASE_URL + "/getEmptyImg")
// 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'


//表格
const tableData = ref([]);

</script>

<style scoped lang="scss">
analysis-button {
  background-color: rgb(33, 108, 157);
}

::v-deep .el-tabs__item {
  color: rgb(245, 245, 245);
}

.box-card {
  margin-bottom: 20px;
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
}

/* 其他样式 */
.custom-header {
  background-color: rgb(26, 68, 94);
  padding-top: 15px;
}

.nav-tab {
  display: inline-block;
  /* 使 div 表现得像行内块级元素 */
  float: right;
  /* 使其右浮动 */
  color: rgb(245, 245, 245);
}

/*图片 */
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}

.demo-image .block:last-child {
  border-right: none;
}

.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>